<template>
	<view class="userBox">
		<view class="topImg"></view>
		<image class="touxiang" :name="userDetail.username" :src="userDetail.avatar?userDetail.avatar:headImg"></image>
		<view class="tiele">{{userDetail.userName}}</view>
		
		<view style="padding: 0 10px;">
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="6">
					<view class="rolesBox">角色</view>
				</uni-col>
				<uni-col :span="18">
					<view class="rolesBox">
						<uni-tag type="warning" size="mini" inverted v-for="(role, i) in (userDetail.roles || [])"
							:key="`r${i}`" :text="role.roleName" class="tabCss"></uni-tag>
					</view>
				</uni-col>
			</uni-row>
			
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="6">
					<view class="rolesBox">部门</view>
				</uni-col>
				<uni-col :span="18">
					<view class="rolesBox">
						<uni-tag type="warning" size="mini" inverted v-for="(role, i) in (userDetail.roles || [])"
							:key="`r${i}`" :text="userDetail.dept.deptName" class="tabCss"></uni-tag>
					</view>
				</uni-col>
			</uni-row>
			
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="6">
					<view class="rolesBox">手机号码</view>
				</uni-col>
				<uni-col :span="18">
					<view class="rolesBox">
						{{userDetail.phonenumber}}
					</view>
				</uni-col>
			</uni-row>
			
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col :span="6">
					<view class="rolesBox">邮箱</view>
				</uni-col>
				<uni-col :span="18">
					<view class="rolesBox">
						{{userDetail.email}}
					</view>
				</uni-col>
			</uni-row>
		</view>
		
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	import headImg from '@/static/me/moren.png'; //需要引入store
	export default {
		data() {
			return {
				headImg: headImg
			};
		},
		computed: {
			// app 内容区数据
			userDetail() {
				return uni.getStorageSync('loginUser')
			}
		},
		created() {
			console.log(123, this.userDetail)
		},
		methods: {

		}
	};
</script>


<style lang="less" scoped>
	.userBox{
		background-color: #fff;
		height: calc(100vh - 96px);
	}
	.tiele{
		text-align: center;
		font-size: 20px;
		line-height: 60px;
		font-weight: bold;
	}
	.rolesBox{
		font-size: 14px;
		color: #666;
		padding: 14px 0;
	}
	
	.topImg{
		height: 200px;
		background-image: url(@/static/me/backTop.png);
		background-size: contain;
	    background-position: top center;
		background-repeat: no-repeat;
	}
	
	.touxiang{
		width: 120px;
		height: 120px;
		margin: 0 auto;
		border-radius: 100px;
		background-color: #fff;
		margin: 0 auto;
		display: block;
		margin-top: -80px;
		box-shadow: 2px 2px 6px 2px #cccccc73;
	}
	
	.tabCss{
		margin-right: 10px;
	}
</style>